<template>
    <div class="base-info">
        <el-skeleton :loading="loading" :throttle="0" animated>
            <template #template>
                <el-skeleton-item class="skeleton-item" style="width: 66%" />
                <el-skeleton-item class="skeleton-item" style="width: 66%" />
                <div>
                    <el-skeleton-item class="skeleton-item skeleton-item-title" style="width: 33%" />
                </div>
                <el-skeleton-item class="skeleton-item" />
                <el-skeleton-item class="skeleton-item" style="width: 66%" />
                <div>
                    <el-skeleton-item class="skeleton-item skeleton-item-title" style="width: 33%" />
                </div>
                <el-skeleton-item class="skeleton-item" />
                <el-skeleton-item class="skeleton-item" />
                <div>
                    <el-skeleton-item class="skeleton-item skeleton-item-title" style="width: 33%" />
                </div>
                <el-skeleton-item class="skeleton-item" style="width: 33%" />
            </template>
            <template #default>
                <el-row :gutter="20" class="base-info-cell">
                    <!-- todo:商户名称 -->
                    <el-col :span="8">商户名称：{{ info.corp_name }}</el-col>
                    <el-col :span="8">商户类型：{{ info.corp_main_type_name }}</el-col>
                    <!-- todo:产品能力 -->
                    <el-col :span="8">产品能力：{{ getCapacityCodeName(info.capacity_code_name) }}</el-col>
                </el-row>
                <el-row :gutter="20" class="base-info-cell">
                    <!-- todo:账户状态 -->
                    <el-col :span="8">
                        账户状态：<span class="status" :style="{ '--status-bgcolor': colorOption[info.status] }">{{
                            info.status_name
                        }}</span>
                    </el-col>
                    <el-col :span="8">创建时间：{{ info.created_at }}</el-col>
                </el-row>
                <template v-if="info.status != 10">
                    <!-- todo:账号信息 -->
                    <template v-for="item in props.info?.isp_info" :key="item.isp_code">
                        <div class="base-info-title">{{ item.isp_code_name }}账户</div>
                        <el-row :gutter="20" class="base-info-cell">
                            <el-col class="custom-col" :span="8"
                                >{{ item.isp_code_name }}账号：{{ item.merchant_no || '--' }}</el-col
                            >
                            <template v-if="item.isp_code !== 'HUISHOUQIAN'">
                                <el-col class="custom-col" :span="8"
                                    >结算周期：{{ item.account_settle_type_name || '--' }}</el-col
                                >
                                <el-col class="custom-col" :span="8"
                                    >费率：{{ getPayRate(item.account_pay_rate) || '--' }}%</el-col
                                >
                                <el-col
                                    :span="8"
                                    class="custom-col"
                                    v-for="(childItem, index) in item.merchant_apply"
                                    :key="index + childItem.merchant_no">
                                    {{ childItem.merchant_no_type_name }}：{{ childItem.merchant_no || '--' }}
                                </el-col>
                            </template>
                        </el-row>
                    </template>
                </template>
            </template>
        </el-skeleton>
    </div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { floatDivide } from '@/commons/utils';

const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    },
    type: {
        type: String,
        default: ''
    }
});

const colorOption = {
    10: '#EAEAEA', // 草稿中
    20: '#FF6B00', // 开户中
    30: '#60B900' // 开户完成
};

const loading = ref(true);

const getPayRate = rate => {
    if (rate) {
        return floatDivide(rate, 100);
    }
    return '--';
};

// 产品能力转换成字符串
const getCapacityCodeName = codeNameList => {
    if (!codeNameList || !codeNameList.length) {
        return '--';
    }
    return codeNameList.join('；');
};

watch(
    () => props.info.corp_main_type_name,
    val => {
        if (val) {
            setTimeout(() => {
                loading.value = false;
            }, 300);
        }
    }
);
</script>
<style lang="scss" scoped>
.base-info {
    margin-bottom: 16px;
    padding: 8px 24px 24px;
    background: #ffffff;
    .base-info-cell {
        margin-top: 16px;
        font-size: 14px;
        color: #33302d;
        line-height: 14px;
        .status {
            // --status-bgcolor: #ff6b00;

            &::before {
                content: '';
                display: inline-block;
                width: 8px;
                height: 8px;
                // margin-top: -2px;
                margin-right: 8px;
                background-color: var(--status-bgcolor);
                border-radius: 4px;
            }
        }
        .custom-col {
            margin-top: 16px;
        }
    }
    .base-info-title {
        padding: 32px 0 0px;
        margin-bottom: -8px;
        font-size: 18px;
        font-weight: 500;
        color: #33302d;
        line-height: 18px;
    }
}
.skeleton-item {
    margin-top: 14px;
    height: 14px;
}
.skeleton-item-title {
    margin: 18px 0 8px;
    height: 22px;
}
</style>
